<template>
    <view class="redpacket">
        <view class="redheader">
            <view class="redheaderTop flex flex-align">
                <view class="flex-1 list">
                    <view class="redheaderTopText"> 红包余额 </view>
                    <view class="redheaderTopPrice"> <span>￥</span> {{ datainfo.balance3 }} </view>
                </view>
                <view class="flex-1 list">
                    <view class="redheaderTopText"> 发放金额 </view>
                    <view class="redheaderTopPrice"> <span>￥</span> {{ datainfo.red_price }} </view>
                </view>
            </view>
            <view class="redheaderBottom">
                <view class="flex flex-align">
                    <view class="flex-1">
                        <button class="redheaderBottomText" @click="goUrl('/pagesA/chongzhi/chongzhi',true)"> 充值红包余额 </button>
                    </view>
                    <view class="flex-1">
                        <button class="redheaderBottomText" @click="openFafang"> 设置发放金额 </button>
                    </view>
                </view>
            </view>
        </view>
        <view class="redlist">
            <uv-sticky bgColor="#F5F6FA" :offset-top="offsetTop">
                <view class="redlistItem">
                    <view class="flex flex-align flex-center" style="height: 100%;">
                        <view class="flex1" @click="toRecharge(1)">
                            <view class="redlistItemText" :class="{'active':tabActive == 1}"> 历史记录 </view>
                        </view>
                        <view class="flex1" @click="toRecharge(2)">
                            <view class="redlistItemText" :class="{'active':tabActive == 2}"> 今日发放 </view>
                        </view>
                    </view>
                </view>
                <view class="sarechBar">
                    <view class="flex flex-align flex-bt searchBar">
                        <uni-search-bar class="flex-1" placeholder="输入用户ID" cancelButton="none"
                            :focus="false" v-model="searchValue">
                        </uni-search-bar>
                        <view class="searchText" @click="cancel">搜索</view>
                    </view>
                </view>
            </uv-sticky >
            <view class="redlistContent">
                <view v-for="(item,index) in list" :key="index" class="redItem flex flex-align">
                    <view class="left">
                        <view class="content">{{ item.content }}</view>
                        <view class="time">{{ item.created_at }}</view>
                    </view>
                    <view class="right">
                        <view class="price"> {{ item.price}}  </view>
                    </view>
                </view>
            </view>
        </view>
        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose"  mode="input" title="设置发放金额" 
                placeholder="请输入发放金额" @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
import API_CENTER from '@/api/teamcenter'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { goUrl, toast } from '@/utils';
onLoad(() => {
    loadMore()
})
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
const userStore = useUserStore()
const datainfo = computed(() => userStore.userInfo)
const searchValue = ref<any>()
const tabActive = ref<any>(1)
const inputDialog = ref<any>()
const cancel = () => {
    params.keyword = searchValue.value
    reset()
    loadMore()
}

const toRecharge = (type: number) => {
    tabActive.value = type
    params.time = type
    reset()
    loadMore()
}

const { list, isLoading, hasMore, loadMore, reset, params } = useInfiniteLoad(API_CENTER.getRedPacketList, {
    initialParams: {},
    transformResponse: (response) => {
        return response.list || [];
    }
});

const openFafang = () => {
    inputDialog.value.open()
}

const dialogInputConfirm = (e: any) => {
    console.log(e)
    API_CENTER.setRedPacketMoney({
        price: e
    }).then((res: any) => {
        toast('设置成功')
        userStore.setUserInfo()
    })
}

onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
    .redpacket {
        padding: 30rpx 0;
        .redheader{
            background: url('@/static/teamcenter/red01.png') no-repeat;
            background-size: 100% 100%;margin: 0 30rpx;
            padding: 30rpx 0;
            .redheaderTop{
                color: #fff;
                font-size: 28rpx;
                .list{
                    text-align: center;
                    .redheaderTopText{
                        font-size: 24rpx;opacity: 0.8;
                    }
                    .redheaderTopPrice{
                        font-size: 42rpx;font-weight: bold;margin-top:10rpx;
                        span{
                            font-size: 20rpx;
                        }
                    }
                }
            }
            .redheaderBottom{
                margin:50rpx 50rpx 20rpx;box-sizing: border-box;
                .flex-1{
                    margin-right: 40rpx;
                    button{
                        height: 74rpx;
                        line-height: 74rpx;
                        font-size: 26rpx;
                        color: #3C7CFF;font-weight: bold;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 37rpx;
                    }
                }
                .flex-1:last-child{
                    margin-right: 0;
                }
            }
        }
        .redlist{
            background: #F5F6FA;
            padding: 30rpx 0;
            border-radius: 20rpx 20rpx 0 0;
            .redlistItem{
                padding: 0 30rpx;height: 80rpx;text-align: center;color: #969799;
                .redlistItemText{
                    position: relative;
                }
                .flex1{margin-right: 50rpx;}
                .flex1:last-child{
                    margin-right: 0;
                }
                .active{
                    font-size: 28rpx;
                    color: #333;font-weight: bold;
                }
                .active:after{
                    content: '';
                    position: absolute;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30rpx;
                    height: 8rpx;border-radius: 10rpx;
                    background: #3C7CFF;
                }
            }
        }
        .redlistContent{
            margin:  0 30rpx;
            .redItem{
                padding: 20rpx 0 20rpx 30rpx;
                background: #fff;
                margin-bottom: 20rpx;
                border-radius: 20rpx;
                .left{
                    flex: 1;
                    .content{
                        font-size: 28rpx;
                        color: #333;margin-bottom: 10rpx;
                    }
                    .time{
                        font-size: 24rpx;
                        color: #999;
                    }
                }
                .right{
                    width:150rpx;text-align: center;
                    .price{
                        font-size: 36rpx;font-weight: bold;
                        color: #FF4444;
                    }
                }
            }
        }
    }
.searchBar {
    padding:0 30rpx 0 10rpx;
    .searchText {
        background: #3C7CFF;
        color: #fff;
        padding: 12rpx 30rpx;
        border-radius: 14rpx;
    }
}
:deep(){
    .uni-searchbar__box{
        background: #fff!important;
    }
    .uv-sticky{
        z-index: 99!important;
    }
}
</style>
